<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid #c0c0c0;
            box-shadow: 2px 2px 6px rgba(255, 255,255, 0.8) ,
            inset -2px -2px 50px rgba(0,0,0,0.8);
        }
        .btn{

            padding:8px 16px;
            background: #1296db;
            color: #fff;
            font-weight: bold;
            display: inline-block;
            margin: 20px;
        }
    </style>
</body>
<body>
    <div id="box"></div>
<div class="btn" id="btn1">变圆</div>
<div class="btn" id="btn2">停止动画</div>
</body>
<script src="../jquery-3.6.3.js"></script>
<script>
    $(".btn").click(function(){
        //delay（）等待1.5s后执行动画
        //animate（）。animate（）是链式调用一个动画后执行另一个动画可以无限加
        $("#box").delay(1500) .animate({
            "border-radius":"100%"

    },800).animate({
        "border-radius":"10px" 
    },1500)
})
//点击停止动画
$(`#btn2`).click(function(){
    $("#box").stop(true)//加true停止所有动画
})
</script>
</html>
